<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学期管理 - 实验室辅助管理系统</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <link rel="stylesheet" th:href="@{/css/fontawesome-local.css}">
</head>
<body>
    <div class="management-container">
        <!-- 侧边栏 -->
        <nav class="sidebar">
            <div class="sidebar-header">
                <h2><i class="fas fa-flask"></i> 学期管理</h2>
            </div>
            <ul class="nav-menu">
                <li><a th:href="@{/dashboard}"><i class="fas fa-tachometer-alt"></i> 系统仪表盘</a></li>
                <li><a th:href="@{/college-management}"><i class="fas fa-university"></i> 学院管理</a></li>
                <li class="active"><a th:href="@{/term-management}"><i class="fas fa-calendar-alt"></i> 学期管理</a></li>
                <li><a th:href="@{/laboratory-management}"><i class="fas fa-microscope"></i> 实验室管理</a></li>
                <li><a th:href="@{/user-management}"><i class="fas fa-users"></i> 用户管理</a></li>
                <li><a th:href="@{/assignment-management}"><i class="fas fa-user-cog"></i> 管理员分配</a></li>
            </ul>
        </nav>

        <!-- 主内容区 -->
        <main class="main-content">
            <!-- 顶部栏 -->
            <header class="top-bar">
                <div class="top-bar-left">
                    <h1>学期管理</h1>
                </div>
                <div class="top-bar-right">
                    <div class="user-info">
                        <span th:text="${currentUser.name}">管理员</span>
                        <a th:href="@{/logout}" class="logout-btn">退出</a>
                    </div>
                </div>
            </header>

            <!-- 内容区域 -->
            <div class="content">
                <!-- 操作栏 -->
                <div class="action-bar">
                    <button class="btn btn-primary" onclick="showAddTermModal()">
                        <i class="fas fa-plus"></i> 添加学期
                    </button>
                    <div class="search-box">
                        <input type="text" id="searchInput" placeholder="搜索学期名称..." onkeyup="filterTerms()">
                        <i class="fas fa-search"></i>
                    </div>
                </div>

                <!-- 学期列表 -->
                <div class="card">
                    <div class="card-header">
                        <h3>学期列表</h3>
                        <span class="badge" th:text="${terms.size()} + ' 个学期'">0 个学期</span>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table" id="termTable">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>学期名称</th>
                                        <th>开始日期</th>
                                        <th>结束日期</th>
                                        <th>状态</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr th:each="term : ${terms}">
                                        <td th:text="${term.id}">1</td>
                                        <td th:text="${term.name}">2024学年上学期</td>
                                        <td th:text="${#temporals.format(term.startDate, 'yyyy-MM-dd')}">2024-02-26</td>
                                        <td th:text="${#temporals.format(term.endDate, 'yyyy-MM-dd')}">2024-07-15</td>
                                        <td>
                                            <span th:class="${term.status == T(com.it.labservice.entity.Term$TermStatus).CURRENT ? 'status-normal' : 'status-handled'}"
                                                  th:text="${term.status == T(com.it.labservice.entity.Term$TermStatus).CURRENT ? '进行中' : '已结束'}">已结束</span>
                                        </td>
                                        <td>
                                            <button class="btn btn-sm btn-info" 
                                                    th:data-id="${term.id}" th:data-name="${term.name}" 
                                                    th:data-start-date="${#temporals.format(term.startDate, 'yyyy-MM-dd')}"
                                                    th:data-end-date="${#temporals.format(term.endDate, 'yyyy-MM-dd')}"
                                                    onclick="editTermFromButton(this)">
                                                <i class="fas fa-edit"></i> 编辑
                                            </button>
                                            <button class="btn btn-sm btn-success" 
                                                    th:if="${term.status != T(com.it.labservice.entity.Term$TermStatus).CURRENT}"
                                                    th:data-id="${term.id}" onclick="activateTermFromButton(this)">
                                                <i class="fas fa-play"></i> 激活
                                            </button>
                                            <button class="btn btn-sm btn-warning" 
                                                    th:if="${term.status == T(com.it.labservice.entity.Term$TermStatus).CURRENT}"
                                                    th:data-id="${term.id}" onclick="deactivateTermFromButton(this)">
                                                <i class="fas fa-pause"></i> 停用
                                            </button>
                                            <button class="btn btn-sm btn-danger" 
                                                    th:if="${term.status != T(com.it.labservice.entity.Term$TermStatus).CURRENT}"
                                                    th:data-id="${term.id}" onclick="deleteTermFromButton(this)">
                                                <i class="fas fa-trash"></i> 删除
                                            </button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- 添加学期模态框 -->
    <div id="addTermModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>添加学期</h3>
                <span class="close" onclick="closeModal('addTermModal')">&times;</span>
            </div>
            <div class="modal-body">
                <form id="addTermForm">
                    <div class="form-group">
                        <label for="termName">学期名称</label>
                        <input type="text" id="termName" name="name" class="form-control" placeholder="如：2024学年上学期" required>
                    </div>
                    <div class="form-group">
                        <label for="startDate">开始日期</label>
                        <input type="date" id="startDate" name="startDate" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label for="endDate">结束日期</label>
                        <input type="date" id="endDate" name="endDate" class="form-control" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="closeModal('addTermModal')">取消</button>
                <button type="button" class="btn btn-primary" onclick="saveTerm()">保存</button>
            </div>
        </div>
    </div>

    <!-- 编辑学期模态框 -->
    <div id="editTermModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>编辑学期</h3>
                <span class="close" onclick="closeModal('editTermModal')">&times;</span>
            </div>
            <div class="modal-body">
                <form id="editTermForm">
                    <input type="hidden" id="editTermId" name="id">
                    <div class="form-group">
                        <label for="editTermName">学期名称</label>
                        <input type="text" id="editTermName" name="name" class="form-control" placeholder="如：2024学年上学期" required>
                    </div>
                    <div class="form-group">
                        <label for="editStartDate">开始日期</label>
                        <input type="date" id="editStartDate" name="startDate" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label for="editEndDate">结束日期</label>
                        <input type="date" id="editEndDate" name="endDate" class="form-control" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="closeModal('editTermModal')">取消</button>
                <button type="button" class="btn btn-primary" onclick="updateTerm()">保存</button>
            </div>
        </div>
    </div>

    <script th:src="@{/js/app.js}"></script>
    <script>
        // 显示添加学期模态框
        function showAddTermModal() {
            document.getElementById('addTermModal').style.display = 'block';
            document.getElementById('termName').value = '';
            document.getElementById('startDate').value = '';
            document.getElementById('endDate').value = '';
        }

        // 编辑学期
        function editTerm(id, name, startDate, endDate) {
            document.getElementById('editTermId').value = id;
            document.getElementById('editTermName').value = name;
            document.getElementById('editStartDate').value = startDate;
            document.getElementById('editEndDate').value = endDate;
            document.getElementById('editTermModal').style.display = 'block';
        }

        // 从按钮编辑学期
        function editTermFromButton(button) {
            const id = button.getAttribute('data-id');
            const name = button.getAttribute('data-name');
            const startDate = button.getAttribute('data-start-date');
            const endDate = button.getAttribute('data-end-date');
            editTerm(id, name, startDate, endDate);
        }

        // 保存学期
        function saveTerm() {
            const form = document.getElementById('addTermForm');
            const formData = new FormData(form);
            
            // 验证日期
            const startDate = new Date(formData.get('startDate'));
            const endDate = new Date(formData.get('endDate'));
            
            if (startDate >= endDate) {
                alert('开始日期必须早于结束日期');
                return;
            }
            
            fetch('/api/terms', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    closeModal('addTermModal');
                    location.reload();
                } else {
                    alert('添加失败：' + data.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('添加失败');
            });
        }

        // 更新学期
        function updateTerm() {
            const form = document.getElementById('editTermForm');
            const formData = new FormData(form);
            const id = document.getElementById('editTermId').value;
            
            // 验证日期
            const startDate = new Date(formData.get('startDate'));
            const endDate = new Date(formData.get('endDate'));
            
            if (startDate >= endDate) {
                alert('开始日期必须早于结束日期');
                return;
            }
            
            fetch('/api/terms/' + id, {
                method: 'PUT',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    closeModal('editTermModal');
                    location.reload();
                } else {
                    alert('更新失败：' + data.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('更新失败');
            });
        }

        // 激活学期
        function activateTerm(id) {
            if (confirm('确定要激活这个学期吗？激活后其他学期将自动停用。')) {
                fetch('/api/terms/' + id + '/activate', {
                    method: 'POST'
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        location.reload();
                    } else {
                        alert('激活失败：' + data.message);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('激活失败');
                });
            }
        }

        // 从按钮激活学期
        function activateTermFromButton(button) {
            const id = button.getAttribute('data-id');
            activateTerm(id);
        }

        // 停用学期
        function deactivateTerm(id) {
            if (confirm('确定要停用这个学期吗？')) {
                fetch('/api/terms/' + id + '/deactivate', {
                    method: 'POST'
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        location.reload();
                    } else {
                        alert('停用失败：' + data.message);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('停用失败');
                });
            }
        }

        // 从按钮停用学期
        function deactivateTermFromButton(button) {
            const id = button.getAttribute('data-id');
            deactivateTerm(id);
        }

        // 删除学期
        function deleteTerm(id) {
            if (confirm('确定要删除这个学期吗？删除后将无法恢复！')) {
                fetch('/api/terms/' + id, {
                    method: 'DELETE'
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        location.reload();
                    } else {
                        alert('删除失败：' + data.message);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('删除失败');
                });
            }
        }

        // 从按钮删除学期
        function deleteTermFromButton(button) {
            const id = button.getAttribute('data-id');
            deleteTerm(id);
        }

        // 搜索过滤
        function filterTerms() {
            const searchTerm = document.getElementById('searchInput').value.toLowerCase();
            const table = document.getElementById('termTable');
            const rows = table.getElementsByTagName('tbody')[0].getElementsByTagName('tr');
            
            for (let i = 0; i < rows.length; i++) {
                const termName = rows[i].getElementsByTagName('td')[1].textContent.toLowerCase();
                if (termName.includes(searchTerm)) {
                    rows[i].style.display = '';
                } else {
                    rows[i].style.display = 'none';
                }
            }
        }

        // 关闭模态框
        function closeModal(modalId) {
            document.getElementById(modalId).style.display = 'none';
        }

        // 点击模态框外部关闭
        window.onclick = function(event) {
            const modals = document.getElementsByClassName('modal');
            for (let i = 0; i < modals.length; i++) {
                if (event.target == modals[i]) {
                    modals[i].style.display = 'none';
                }
            }
        }
    </script>
</body>
</html> 